<script>
export default {
  name: "News",
  data(){
    return {
      //新闻列表
      newsList:[
        {id:9001,title:'标题1',author:'rose',time:'2024-12-10'},
        {id:9002,title:'标题2',author:'rose',time:'2024-12-11'},
        {id:9003,title:'标题3',author:'rose',time:'2024-12-12'}
      ]
    }
  },
  methods:{
    goDetail(id){
      //模板语法：使用撇号,不是单引号
      this.$router.push(`/news/${id}`)
     // this.$router.push('/news/detail')
    },

    goDetail2(id){
      //使用？传参
      this.$router.push(`/news2?id=${id}`)
    },
    //传递对象
    transferObj(){
      //获取第一个新闻对象
      let news = this.newsList[0];
      //将对象序列化为字符串
      let data = JSON.stringify(news);
      this.$router.push({path:'/news3',query:{data:data}})
    }
  }
}
</script>

<template>
    <h3>这是新闻列表页面</h3>
  <h3>使用占位符传参</h3>
    <ul>
      <li v-for="(news,index) in newsList" :key="index">
        <a href="javascript:void(0)" @click="goDetail(news.id)">新闻标题：{{news.title}}--作者{{news.author}}--发表时间:{{news.time}}</a>
      </li>
    </ul>
  <h3>使用？问号传参</h3>
  <ul>
    <li v-for="(news,index) in newsList" :key="index">
      <a href="javascript:void(0)" @click="goDetail2(news.id)">新闻标题：{{news.title}}--作者{{news.author}}--发表时间:{{news.time}}</a>
    </li>
  </ul>
  <h3>传递对象</h3>
  <button @click="transferObj">传递对象到详情页面</button>
<!--显示新闻的详情  -->
  <RouterView/>
</template>

<style scoped>

</style>